<template>
    <div class="smartWarningInventory">
        <a-modal width="90%" :visible="visible" title="党参配方颗粒" @cancel="modalCancel"
            class="yuan-modal smartWarningInventory-modal" :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="formLoading">
                <div class="yuan-container">
                    <div class="filter-panel">
                        <div class="filter-list">
                            <span>标准：</span>
                            <a-select v-model="pageParams.standard" placeholder="请选择" @change="standardChange"
                                      style="width:280px">
                                <a-select-option value="国标">国标</a-select-option>
                                <a-select-option value="省标">省标</a-select-option>
                                <a-select-option value="省标-北京">省标-北京</a-select-option>
                                <a-select-option value="省标-上海">省标-上海</a-select-option>
                                <!--                        <a-select-option value="国标-北京">国标-北京</a-select-option>-->
                            </a-select>
                        </div>
                        <div class="filter-list">
                            <span>产品大类：</span>
                            <a-select v-model="pageParams.inventoryType" placeholder="请选择" @change="inventoryTypeChange"
                                style="width:280px">
                                <a-select-option v-if="pageParams.standard == '国标'" value="C60">C60</a-select-option>
                                <a-select-option v-if="pageParams.standard == '国标'" value="C70">C70</a-select-option>
                                <a-select-option v-if="pageParams.standard == '省标'" value="C80">C80</a-select-option>
                                <a-select-option v-if="pageParams.standard == '省标'" value="C90">C90</a-select-option>
                                <a-select-option v-if="pageParams.standard == '省标-北京'" value="C81">C81</a-select-option>
                                <a-select-option v-if="pageParams.standard == '省标-上海'" value="C82">C82</a-select-option>
                                <a-select-option v-if="pageParams.standard == '省标-北京'" value="C91">C91</a-select-option>
                                <a-select-option v-if="pageParams.standard == '省标-上海'" value="C92">C92</a-select-option>
                            </a-select>
                        </div>
                        <div class="filter-list">
                            <span>选择品名：</span>
                            <a-select  v-model="pageParams.type" placeholder="请选择" @change="typeChange"
                                style="width:280px">
                                <a-select-option v-for="item in typeList" :key="item.id" :value="item.name">{{item.name}}</a-select-option>
                            </a-select>
                        </div>
                        <div class="filter-list">
                            <span>选择日期：</span>
                            <a-range-picker v-model="pageParams.date" @change="dateChange" :placeholder="['开始日期','结束日期']"
                                :format="['YYYY-MM-DD','YYYY-MM-DD']" />
                        </div>
                        <div class="filter-list">
                            <a-button type="primary" @click="search">搜索</a-button>
                        </div>
                    </div>
                    <div class="info-box">
                        <div class="panel-content">
                            <div class="panel-row">
                                <span>当前品种：{{productName}}</span>
                            </div>
                            <div class="panel-row">
                                <span>产品大类：{{pageParams.inventoryType}}</span>
                            </div>
                            <div class="panel-row">
                                <span>标准：{{pageParams.standard}}</span>
                            </div>
                            <div class="panel-row">
                                <span>当前库存：{{pageParams.stockNum}}</span>
                            </div>
                            <div class="panel-row">
                                <span>可销售天数：{{pageParams.availableSellDay}}天</span>
                            </div>
                        </div>
                    </div>
                    <div id="inventoryChart"></div>
                    <div class="inventory-table">
                        <div class="filter-panel">
                            <div class="filter-list">
                                <span>标准：</span>
                                <a-select v-model="tableParams.standard" placeholder="请选择" @change="standardChange"
                                          style="width:200px">
                                    <a-select-option value="国标">国标</a-select-option>
                                    <a-select-option value="省标">省标</a-select-option>
                                    <a-select-option value="省标-北京">省标-北京</a-select-option>
                                    <a-select-option value="省标-上海">省标-上海</a-select-option>
                                    <!--                        <a-select-option value="国标-北京">国标-北京</a-select-option>-->
                                </a-select>
                            </div>
                            <div class="filter-list">
                                <span>产品大类：</span>
                                <a-select v-model="tableParams.inventoryType" placeholder="请选择" @change="inventoryTypeChange"
                                          style="width:200px">
                                    <a-select-option value="C60">C60</a-select-option>
                                    <a-select-option value="C70">C70</a-select-option>
                                    <a-select-option value="C80">C80</a-select-option>
                                    <a-select-option value="C90">C90</a-select-option>
                                </a-select>
                            </div>
                            <div class="filter-list">
                                <span>选择品名：</span>
                                <a-select  v-model="tableParams.name" placeholder="请选择" @change="typeChange"
                                           style="width:200px">
                                    <a-select-option value="川芎">川芎</a-select-option>
                                    <a-select-option value="党参">党参</a-select-option>
                                    <a-select-option value="当归">当归</a-select-option>
                                    <a-select-option value="白莲">白莲</a-select-option>
                                </a-select>
                            </div>
                            <div class="filter-list">
                                <span>标准值比例：</span>
                                <a-input-number  v-model="tableParams.percent" placeholder="请输入标准值比例"
                                           style="width:200px">
                                </a-input-number>&nbsp;%
                            </div>
                            <div class="filter-list">
                                <span>选择日期：</span>
                                <a-range-picker style="width: 200px" @change="dateChange" :placeholder="['开始日期','结束日期']"
                                                :format="['YYYY-MM-DD','YYYY-MM-DD']" />
                            </div>
                            <div class="filter-list">
                                <a-button type="primary" @click="tableSearch">搜索</a-button>
                            </div>
                        </div>
                        <a-table :columns="columns" :data-source="tableParams.data" :pagination="tableParams.pagination" bordered></a-table>
                    </div>
                </div>
            </a-spin>
            <template slot="footer">
                <a-button @click="modalCancel">
                    关闭
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { echartLoad } from "@/utils";
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import nextApi from "@/api/nextApi";
import warningApi from "@/api/warningApi";
import moment from "moment";

@Component({ name: "TPL", components: {  } })
export default class index extends Vue {
    @Prop({ default: "" }) visible!: boolean;
    @Prop({default: ""}) standard!: string;
    @Prop({default: ""}) name!: string;
    @Prop({default:""}) type!: string;
    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            this.$nextTick(()=>{
                this.setChart();
                this.setDefaultTime()
                this.pageParams.inventoryType = this.type;
                this.pageParams.standard = this.standard
                this.pageParams.type = this.name
                this.getChartData()
            })

        }
    }
    columns = [
        {
            title: "品种名称",
            dataIndex: "name",
            key: "name",
            align: "center",
        },
        {
            title: "期初天数",
            dataIndex: "beginDay",
            key: "beginDay",
            align: "center",
        },
        {
            title: "期末天数",
            dataIndex: "endDay",
            key: "endDay",
            align: "center",
        },
        {
            title: "超出发货比例",
            dataIndex: "overProportion",
            key: "overProportion",
            align: "center",
        },
    ];
    pageParams: any = {
        type: [],
        inventoryType: "",
        standard: "",
        stockNum:'',
        availableSellDay:'',
        date: []
    };
    tableParams: any = {
        standard: "国标",
        inventoryType: "C60",
        percent:0,
        name:"",
        date:[],
        data:[],
        pagination:{
            current: 1,
            pageSize: 10,
            total:0,
            showTotal: (total: number) => `共${total}条`,
            onChange: (page: number, pageSize: number) => {
                this.pageChange(page, pageSize);
            },
        },
    };
    setDefaultTime(){
        //将查询参数的时间默认设置为当前日期的前七天
        this.pageParams.date = [
            moment().subtract(7, "days").format("YYYY-MM-DD"),
            moment().format("YYYY-MM-DD"),
        ];
    }
    typeList:any = []
    //查询成品品名
    async getTypeList() {
        const res = await nextApi.getMaterialList({
            page:1,
            pageSize:10000,
            state:true,
            standard:this.pageParams.standard,
            inventoryType:this.pageParams.inventoryType,
        });
        this.typeList = res.data.records || [];

    }
    pageChange(page,pageSize){
        this.tableParams.pagination.current = page;
        this.getTableData();
    }
    async getTableData(){
        // const res = await
    }
    formLoading = false;

    closeModal() {
        this.$emit("closeModal");
    }
    modalCancel() {
        this.closeModal();
    }
    search(){

    }
    tableSearch(){

    }
    dateChange(e: any[]) {
        this.pageParams.date = e.map((item) => item.format("YYYY-MM-DD"));
    }
    typeChange(e: string[]) {
        // if (e.length > 3) e.pop();
        this.pageParams.type = e;
        this.getChartData()
    }
    //查询chartData
    async getChartData() {
        const res =  await warningApi.chartStatistics({
            starDate: this.pageParams.date[0],
            endDate: this.pageParams.date[1],
            inventoryType: this.pageParams.inventoryType,
            standard: this.pageParams.standard,
            name:this.pageParams.type
        });
        console.log(res)
        this.pageParams.stockNum = res.data.info.stockNum
        this.pageParams.availableSellDay = res.data.info.availableSellDay
        this.testData = res.data.list;
        this.setChart();
    }
    async standardChange(){
        if(!this.pageParams.inventoryType){
            return
        }
        await this.getTypeList()
    }
    async inventoryTypeChange(){
        await this.getTypeList()
    }
    chart: any = null;
    getXOptions() {
        return {
            type: "category",
            axisLabel: {
                interval: 0,
            },
            name: "",
        };
    }
    getYOptions() {
        return {
            type: "value",
            axisLine: {
                show: true,
            },
            name: "可销售天数",
        };
    }
    setChart() {
        if (this.chart) {
            this.resetChart();
        } else {
            this.initChart();
        }
    }
    resetChart() {
        const data = this.setData();
        const options = this.chart.getOption();
        options.series = this.getSeries(data.dataArr);
        options.xAxis = { ...this.getXOptions(), data: data.titleArr };
        options.yAxis = this.getYOptions();
        this.chart.setOption(options, true);
    }
    initChart() {
        echartLoad(() => {
            const data = this.setData();
            const chartDom = document.getElementById("inventoryChart");
            // eslint-disable-next-line @typescript-eslint/no-this-alias
            const options: any = {
                grid: {
                    top: 80,
                    bottom: 40,
                    left: 80,
                    right: 70,
                },
                legend: {},
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                        shadowStyle: {
                            color: "rgba(84,112,198,0.3)",
                        },
                    },
                },
                xAxis: { ...this.getXOptions(), data: data.titleArr },
                yAxis: this.getYOptions(),
                series: this.getSeries(data.dataArr),
            };
            if (chartDom) {
                this.chart = window.echarts.init(chartDom as HTMLDivElement);
                this.chart.setOption(options);
            }
        });
    }
    colors = ["#F25C19", "#294482", "#57A349", "#FAC858", "#85C8E2"];
    getSeries(dataArr: { name: string; dataList: string[] }[]) {
        const returnArr: any[] = [];
        dataArr.forEach((item, i) => {
            returnArr.push({
                type: "line",
                smooth: true,
                symbolSize: 8,
                color: this.colors[i],
                label: {
                    show: true,
                    color: "inherit",
                    position: "top",
                },
                name: item.name,
                data: item.dataList,
                areaStyle: {
                    color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: this.colors[i], // 渐变颜色，可以设置多个不同的颜色
                        },
                        {
                            offset: 1,
                            color: "rgba(255, 255, 255, 0.1)", // 渐变颜色
                        },
                    ]),
                },
            });
        });
        return returnArr;
    }

    testData: any = []
    setData() {
        console.log(this.pageParams.type)
        if(this.pageParams.type.length == 0){
            return { titleArr: [], dataArr:[] }
        }
        const typeArr: string[] = [this.pageParams.type];
        const dataArr = typeArr.map((item: string) => {
            return {
                name: item,
                titleArr: this.testData.map((o) => o.date),
                dataList: this.testData.map((o) => o.availableSellDay),
            };
        });
        return { titleArr: dataArr[0] ? dataArr[0].titleArr : [], dataArr };
    }

    get productName(){
        if(typeof this.pageParams.type == "string"){
            return [this.pageParams.type][0]
        }else{
            return this.pageParams.type[0]
        }
    }
}
</script>

<style lang="scss">
.smartWarningInventory-modal {
    #inventoryChart {
        width: 1200px;
        height: 400px;
        margin-top: 20px;
         max-width: 100%;
    }

    .info-box{
        display: inline-block;
        margin: 30px 0;
        background-color: #F76A4A;
        font-size: 16px;
        font-weight: bold;
        border-radius: 12px;
        letter-spacing: 2px;
        color: #FFFFFF;
        .panel-content{
            padding: 20px 60px;
            width: 100%;
        }
    }
}

</style>
